<template>
	<view class="viewbox auto p-bot60" v-if="pageData">
		<block v-if="pageData.chapter_list">	
		<view class="row j-sb  m-bot20">
			<view class="title color_33 size30">共 {{pageData.chapter_list.length}} 章节</view>
			<view class="iconfont icon-a-101sortpaixu color_66 size36 p-left20 p-bot20" @click="reverseBtn"></view>
		</view>
		<view class="row j-sb a-center m-bot30" 
		      v-for="(item,index) in pageData.chapter_list" :key="index" 
			  @click="toUrl(`detailsPart?chapter_id=${item.chapter_id}&goods_id=${pageData.goods_id}`)">
			<view class="numB flexac white size38" 
			     :class="{'bgF3':item.chapter_state == 2,'bgFF':item.chapter_state == 1}">{{index+1}}</view>
			<view class="flex-1 d-flex f-column m-left20 m-right20">
				<text class="ellipsis color_33 size28 bold">{{item.chapter_title}}</text>
				<text class="color_66 h7">{{item.seconds_detail}}</text>
			</view>
			<view class="d-flex f-column a-end">
				<text class="color_66 size22">{{item.chapter_state | chapter_state_txt(item)}}</text>
				<view class="progor m-top10">
					<view class="schPro" :style="{width:item.chapter_percent+'%'}"></view>
				</view>
			</view>
		</view>
		</block>		
		<emptys v-else></emptys>
	</view>
</template>

<script>
	export default {
		name:'chapter',
		props:['pageData'],
		data() {
			return {
				
			}
		},
		methods: {
			reverseBtn(){
				this.pageData.chapter_list.reverse();
			}
		},
		filters:{
			chapter_state_txt(value,item){
				if(value == 0) return '待学习';
				if(value == 1) return `进度${item.chapter_percent}%`;
				if(value == 2) return '已学完';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding-left:24rpx;
		position: relative;
	}
	.title::after{
		content: '';
		width: 8rpx;
		height: 34rpx;
		background: #E42417;
		position: absolute;
		left:0;
		top:4rpx;
	}
	.numB{
		width: 56rpx;
		height: 56rpx;
		background: #C8C8C8;
		border-radius: 4rpx;
	}
	.progor{
		width: 160rpx;
		height: 10rpx;
		background: #E4E4E4;
		border-radius: 6rpx;
		position: relative;
		overflow: hidden;
	}
	
	.schPro{
		height: 100%;
		background-color: #FF5255;
		position: absolute;
		top:0;
		left:0;
	}
	.bgF3{
		background-color: #F36A3A !important;
	}
	.bgFF{
		background-color: #FF8A61 !important;
	}
</style>
